<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

    <div style="margin: 20px">
        <form class="layui-form layui-form-pane">
            <input type="hidden" id="photoPath" name="photoPath" th:value="${m.photoPath}">
            <input type="hidden" id="id" name="id" th:value="${m.id}">
            <!---->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-upload-list" >
                        <img th:src="@{'/file/fc/showImg/'+${m.photoPath}}" class="layui-upload-img" id="photo"
                             style="border: 1px solid #01AAED;border-radius: 4px;width: 100px;height: 100px">
                        <p id="photoText"></p>
                    </div>
                    <a class="layui-btn " id="checkPhoto" style="width: 100px;">选择头像</a>
                    <!---->
                    <div style="width: 200px;margin: 5px">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                             lay-filter="photoProgress">
                            <div class="layui-progress-bar layui-bg-blue" lay-perent="20%"></div>
                        </div>
                    </div>
                    <!---->
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input class="layui-input" th:value="${m.userName}" name="userName" placeholder="输入用户名" autocomplete="off"/>
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                <div class="layui-input-block">
                    <input class="layui-input" th:value="${m.loginName}" readonly  name="loginName" placeholder="输入登录名" autocomplete="off"/>
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">登录密码</label>
                <div class="layui-input-block">
                    <input type="password" th:value="${m.password}" class="layui-input layui-disabled" name="password" placeholder="输入登录密码，不输入默认123456" autocomplete="off"/>
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">所属角色</label>
                <div class="layui-input-block">
                    <input class="layui-input"  th:value="${m.roleIds}" name="roleIds" placeholder="选择角色" autocomplete="off"/>
                </div>
            </div>
            <!---->
            <div class="layui-form-item" style="display: none;">
                <div class="layui-input-block">
                    <a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">提交</a>
                </div>
            </div>
        </form>
    </div>

    <!---->
    <script>
        var $;
        layui.use(['table','form','jquery','layer','upload','element'],function() {
            var table = layui.table, layer = layui.layer,
                form = layui.form,upload = layui.upload,element = layui.element;
            $ = layui.jquery;
            
            //头像上传
            var photoUpload = upload.render({
                elem:'#checkPhoto',
                url:'/file/fc/fileUpload',
                before:function (obj) {
                    obj.preview(function (i,f,r) {
                        $('#photo').attr('src',r);
                        
                    });
                    element.progress('photoProgress','0%');
                },
                done:function (res) {
                    if (!res.is){
                        layer.msg('上传失败，请稍后再试......');
                    }else {
                        $('#photoPath').val(res.file.id);
                    }
                },
                error:function(){

                },
                progress:function (n,el,e) {
                    element.progress('photoProgress',n+"%");
                    if (n==100){
                        layer.msg('上传完成!',{icon:1});
                    }
                }

            })

            form.on('submit(submitBtn)',function (data) {
                var formData = data.field;
                $.ajax({
                    type:'post',
                    url:'/system/mc/update',
                    data:formData,
                    dataType:'json',
                    success:function (result) {
                        layer.msg(result.msg);
                        if (result.is){
                            let index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);  //编辑成功后关闭父页面窗口
                            parent.layui.table.reload('memberTable');//根据表格id刷新父页面表格
                        }
                    }
                })
            })

        });

        function btnSubmit() {
            $('#submitBtn').click();
        }
    </script>

</body>
</html>